<template>
    <div class="conf_issue">
        <div class="conf_issue_detail" title="下单配置">
            <div class="conf_issue_detail_pics">
                <div class="conf_issue_detail_pic1" />
                <div class="conf_issue_detail_pic2" />
            </div>            
            <div class="conf_category_groups">
                <div v-for="(item, index) in categories" :key="index" class="conf_category_group">
                    <div class="conf_category_name">
                        <button class="conf_category_name_btn">{{ item.name }}</button>
                    </div>
                    <div class="conf_category_num">
                        <input type="text" class="conf_category_num_text" v-model="item.num" placeholder="10" />
                    </div>
                    <div class="conf_category_unknown_label">
                        <span>{{ item.label }}</span>
                    </div>
                </div>
            </div>
            <div class="conf_issue_seprator"></div>
        </div>             
        <div>
            <div class="conf_issue_summary">
                <div class="conf_issue_summary_num">
                    <div class="conf_issue_summary_production_type" style="margin-left: 50px;">
                        <div style="width: 150px;">产品类型</div>
                        <div  style="margin-left: 37px; font-weight: bolder;">{{ exampleProductName }}</div>                       
                    </div>
                    <div class="conf_issue_summary_production_num"  style="margin-left: 39px;">
                        <div style="width: 150px;">目标生产数</div>                        
                        <div class="production-control">
                            <button @click="reductionOf" style="height: 40px; font-size: larger;">-</button>
                            <input class="conf_issue_summary_production_num_in" id="target-production" type="text" placeholder="5" style="text-align: center; width: 100px; height: 46px;" v-model="productionCount" @blur="checkNumber" />
                            <button @click="add" style="height: 40px; font-size: larger;">+</button>
                        </div>
                    </div>
                    <div class="conf_issue_summary_production_count" style="margin-left: 50px;">
                        <div style="width: 150px;">已生产数</div>
                        <div style="margin-left: 50px; font-weight: bolder; font-size: larger;">{{ productedNum }}/{{ productionCount }}</div>
                    </div>
                </div>
                <div class="conf_issue_summary_save">
                    <button class="conf_done">配置完成</button>
                    <button class="conf_save">保存配置</button>
                    <div class="conf_ok_nok">
                        <button class="conf_ensure" @click="startProduct">确认生产</button>
                        <button class="conf_cancel">取消生产</button>
                    </div>                    
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { currentPOST } from '@/api';
import { MessageBox, Message } from 'element-ui';

export default {
    name: 'ConfIssue',
    data() {
        return {
            productionCount: 5,
            productedNum: 1,            
            exampleProductName: "产品A",
            categories: [
                { name: '气盖', num: 10, label: "看不清字1"},
                { name: '控制器保护盖板', num: 10, label: "看不清字2" },
                { name: '电池仓', num: 10, label: "看不清字3" },
                { name: '水泵电机', num: 10, label: "看不清字4" },
                { name: '水箱', num: 10, label: "看不清字5" },
                { name: '控制器', num: 10, label: "看不清字6" },
                { name:'M3自攻', num: 10, label: "看不清字7" },
                { name:'M4自攻', num: 10, label: "看不清字8" },
                { name:'窟窿', num: 10, label: "看不清字9" },
            ]
        }
    },

    methods: {
        reductionOf() {
            if (this.productionCount > 1) {
                this.productionCount--;
            } else {
                this.productionCount = 1; // 最小值限制为1
            }
        },
        add() {
            this.productionCount++;
        },
        checkNumber() {
            let reg = /^[1-9]\d*$/;
            if (!reg.test(this.productionCount) || this.productionCount === '') {
                this.productionCount = 1;
            }
        },


        operationDialog(result) {
            const message = result ? "操作成功" : "操作失败";
            MessageBox.alert(message, '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    console.log(action);
                }
            });
        },
        startProduct() {
            let body = {
                "productionType": this.exampleProductName,
                "planNum": this.productionCount,
                "finishedNum": this.productedNum,
                "detail": {
                    "gasCap": this.categories[0].num,
                    "protectCover": this.categories[1].num,
                    "batComp": this.categories[2].num,
                    "pumpMotor": this.categories[3].num,
                    "waterTank": this.categories[4].num,
                    "controller": this.categories[5].num,
                    "selfTappingM3": this.categories[6].num,
                    "selfTappingM4": this.categories[7].num,
                    "hole": this.categories[8].num
                }
            };
            currentPOST("startProduct", body).then(res => {
                console.log("startProduct", res);
                if (res && res.hasOwnProperty('success') && !res.success) {
                    Message({
                        message: `生产数据下发：失败。 ${res.msg}`,
                        type: "error"
                    });
                } else {
                    Message({
                        message: "生产数据下发：成功",
                        type: "success"
                    });
                }
            })
            .catch(err => {
                Message({
                    message: `生产数据下发：失败 - ${err.message || '未知错误'}`,
                    type: "error"
                });
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.conf_issue {
    .conf_issue_detail {
        // display: flex;
        // flex-wrap: wrap; /* 允许换行 */
        // gap: 20px; /* 组之间的间距 */
        .conf_issue_detail_pics {
            display: flex;
            flex-direction: row;

            .conf_issue_detail_pic1 {
                right: -50px;
                position: relative;
                top: 15px;                
                margin: auto;            
                width: 250px;
                height: 250px;
                background-image: url("../../assets/img/device.jpg");
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;  
            }
            .conf_issue_detail_pic2 {
                left: -50px;                
                position: relative;
                top: 15px;                
                margin: auto;
                width: 250px;
                height: 250px;
                background-image: url("../../assets/img/device.jpg");
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;  
            }
        }
        

        .conf_category_groups {
            display: flex;            
            flex-direction: row;
            justify-content: space-around;
            align-items: flex-start; /* 对齐方式 */
            // background-color: #084e869c; /* 可选：添加背景色以便区分 */
            // padding: 10px; /* 内边距 */
            border-radius: 5px; /* 圆角 */
            margin-top: 20px;

            .conf_category_group {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                // margin-bottom: 20px; /* 组间间距 */

                .conf_category_name,
                .conf_category_num,
                .conf_category_unknown_label {
                    margin-bottom: 10px; /* 容器间间距 */
                }

                .conf_category_name_btn {
                    width: 65px;
                    height: 70px;
                    font-size:medium;
                    font-weight: bolder;
                    border-radius: 5px;
                    // margin-right: 5px; /* 按钮与输入框之间的间距 */
                    background-color: rgb(82, 86, 153);
                    color: #fff;               
                }

                .conf_category_num_text {
                    width: 79px;
                    height: 40px;
                    text-align: center;
                    border-radius: 5px; /* 圆角 */
                }

                .conf_category_unknown_label {
                    width: 79px;                    
                    text-align: center;
                    border-radius: 5px;
                }
            }
        }

        .conf_issue_seprator {
            border-top: 8px solid #194263;
            // margin: 2px 0; /* 上下间距 */
            // animation: flash 3s infinite alternate;
        }
    }

    .conf_issue_summary {        
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-top: 10px;

        .conf_issue_summary_num {
            display: flex;
            flex-direction: column;
            justify-content: space-around; // 确保子元素在垂直方向上均匀分布
            align-items: stretch; // 使所有子元素拉伸到相同的宽度
            width: 50%;
            height: 150px; // 设置一个固定高度，确保子元素有足够的空间垂直对齐
        }

        .conf_issue_summary_production_type,
        .conf_issue_summary_production_num,
        .conf_issue_summary_production_count {
            display: flex;
            flex-direction: row;
            justify-content: start;
            align-items: center; // 确保内容垂直居中
            font-size: x-large;
            font-weight: bolder;
            flex-grow: 1; // 让每个子元素根据可用空间增长
        } 

        .production-control {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        .conf_issue_summary_save {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 50%;
            height: 150px;
            // align-items: center; /* 添加此行以使子元素水平居中 */

            .conf_done
            .conf_save
            .conf_ok_nok {
                margin-bottom: 20px;
            }

            .conf_done {
                width: 96%;
                height: 35px;
                position: relative;
                background-color: #d2e5e9;
                font-size: larger;
                font-weight: bolder;
                color:rgba(15, 96, 69, 0.893);
            }

            .conf_save {
                width: 96%;
                height: 35px;
                position: relative;   
                background-color: blue;
                font-size: larger;
                font-weight: bolder;
                color: #fff;
            }

            .conf_ok_nok {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                width: 100%;
                height: 35px;
                // align-items: center; /* 添加此行以使子元素水平居中 */

                .conf_ensure {
                    width: 35%;
                    background-color: rgb(89, 160, 17);
                    font-size: larger;
                    font-weight: bolder;
                    color: #fff;
                }

                .conf_cancel {
                    width: 35%;
                    background-color: fuchsia;    
                    font-size: larger;
                    font-weight: bolder;
                    color: #fff;
                }
            }
        }
    }
}

@keyframes flash {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.2;
    }
}
</style>
